<template>
	<view class="view-index navbar">
		<!-- 顶部菜单开始 -->
		<view class="index-search">
			<view>
				<u-icon name="list" color="#2979ff" size="28"></u-icon>
			</view>
			<view class="search">
				<u-search placeholder="搜索你想找的音乐" v-model="data.serch" :showAction="false" bgColor="#F7F8F9"></u-search>
			</view>
			<view>
				<u-icon name="google-circle-fill" color="#2979ff" size="28"></u-icon>
			</view>
		</view>
		<!-- 顶部菜单结束 -->
		<!-- 轮播图开始 -->
		<view class="index-banner">
			<u-swiper :list="data.list3" indicator indicatorMode="line" circular></u-swiper>
		</view>
		<!-- 轮播图结束 -->
		<!-- 首页菜单列表开始 -->
		<view class="index-menu">
			<swiper class="swiper" next-margin="30px">
				<swiper-item v-for="(item,index) in data.swiperList">
					<u-grid :border="false" :col="5">
						<u-grid-item v-for="(item1, index1) in item" :index="index1 + 18" :key="index1">
							<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="item1" :size="24"></u-icon>
							<text class="grid-text">{{ "歌曲列表" }}</text>
						</u-grid-item>
					</u-grid>
				</swiper-item>
			</swiper>
		</view>
		<!-- 首页菜单列表结束 -->
		<!-- 最新音乐开始 -->
		<view class="index-content">
			<view class="news-title">
				<text class="news-text">最新音乐</text>
				<!-- pause -->
				<u-tag size="mini" text="播放" plain plainFill shape="circle" icon="play-right-fill"></u-tag>
			</view>
			<!-- 最新歌曲列表 -->
			<swiper class="news-content-menulist" next-margin="30px">
				<swiper-item v-for="(item,index) in data.swiperList">
					<view class="news-content-list">
						<u--image radius="4" :src="src1" width="80px" height="80px"></u--image>
						<view class="news-content-info">
							<text>他不懂</text>
							<text class="news-content-subtitle">张杰-听！我们的歌</text>
						</view>
						<view class="news-content-playicon">
							<u-icon name="play-circle" size="28" color="#2979ff"></u-icon>
						</view>
					</view>

					<view class="news-content-list">
						<u--image radius="4" :src="src1" width="80px" height="80px"></u--image>
						<view class="news-content-info">
							<text>他不懂</text>
							<text class="news-content-subtitle">张杰-听！我们的歌</text>
						</view>
						<view class="news-content-playicon">
							<u-icon name="play-circle" size="28" color="#2979ff"></u-icon>
						</view>
					</view>

					<view class="news-content-list">
						<u--image radius="4" :src="src1" width="80px" height="80px"></u--image>
						<view class="news-content-info">
							<text>他不懂</text>
							<text class="news-content-subtitle">张杰-听！我们的歌</text>
						</view>
						<view class="news-content-playicon">
							<u-icon name="play-circle" size="28" color="#2979ff"></u-icon>
						</view>
					</view>
				</swiper-item>

			</swiper>
			<!-- 最新音乐结束 -->
		</view>
		<!-- 推荐歌单开始 -->
		<view class="index-sell">
			<text class="news-text">推荐歌单</text>
			<u-icon label="更多" size="20" name="arrow-right-double" labelPos="left" labelColor="#2979ff"
				color="#2979ff"></u-icon>
		</view>
		<u-grid :border="false" class="index-foot">
			<u-grid-item custom-style="opacity:1;" v-for="item in 6">

				<view class="songlist">
					<u--image radius="4" :src="src1" width="110px" height="100px"></u--image>
					<u-tag class="songlist-play" size="mini" text="播放" plain plainFill shape="circle"
						icon="play-right-fill"></u-tag>
					<text class="songlist-title">情怀烟嗓|岁月磨砺过的噪音</text>
				</view>
			</u-grid-item>

		</u-grid>
		<!-- 推荐歌单结束 -->
		<view class="index-play" v-if="true">
			<view class="play-left">
				<view class="play-img">
					<u--image radius="50" :src="src1" width="32.53px" height="32.53px"></u--image>
				</view>
			</view>
			<view class="play-center">
				<text class="play-center-title">他不懂</text>
				<text class="play-center-info">张杰-听！我们的歌</text>
			</view>
			<view class="play-right">
				<!-- pause-circle -->
				<u-icon class="play-right-play" name="play-circle" color="#2979ff" size="28"></u-icon>
				<u-icon class="play-right-list" name="list-dot" color="#2979ff" size="28"></u-icon>
			</view>
		</view>
	</view>

</template>

<script setup lang="ts">
	import { reactive, ref } from "vue";
	import { onLoad } from "@dcloudio/uni-app"
	import { getBanner } from "../../api/api"

	const src1 = ref('http://p1.music.126.net/KL273-Ilw9rQih7EmPT3Bw==/109951168875416097.jpg');

	const data = reactive({
		serch: null,
		list3: [
			'http://p1.music.126.net/u4b1otmAOgRIJHP54lniXA==/109951168875376157.jpg',
			'http://p1.music.126.net/5nb1xSVrQPM9LLmx3AVaxA==/109951168875385054.jpg',
			'http://p1.music.126.net/KL273-Ilw9rQih7EmPT3Bw==/109951168875416097.jpg',
		],
		swiperList: [
			['integral', 'kefu-ermai', 'coupon', 'gift', 'scan'],
			['pause-circle', 'wifi', 'email', 'list']
		],
		swiperList1: [
			['integral', 'kefu-ermai', 'coupon', 'gift', 'scan'],
			['pause-circle', 'wifi', 'email', 'list']
		]
	})
	const click = () => {
		// 点击事件处理逻辑
	};
	onLoad(() => {
		// getBanner().then(res => {
		// 	console.log(res);
		// })
	})
</script>

<style lang="scss">
	.view-index {
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;


		.index-search {
			width: 95%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.search {
				width: 80%;
			}
		}

		.index-banner {
			width: 95%;
			margin-top: 20rpx;
			margin-bottom: 10rpx;
		}

		.index-menu {
			width: 92%;

			.swiper {
				height: 120rpx;
				margin-bottom: 20rpx;

				.grid-text {
					font-size: 14px;
					color: #909399;
					padding: 10rpx 0 20rpx 0rpx;
					/* #ifndef APP-PLUS */
					box-sizing: border-box;
					/* #endif */
				}
			}
		}

		.index-content {
			width: 95%;

			.news-title {
				display: flex;
				align-items: center;

				.news-text {
					margin-right: 20rpx;
					font-weight: bold;
					font-size: 36rpx;
				}
			}

			.news-content-menulist {
				height: 600rpx;

				.news-content-list {
					display: flex;
					padding: 20rpx;

					.news-content-info {
						margin-left: 20rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						width: 90%;

						text {
							padding: 5rpx;

						}

						.news-content-subtitle {
							color: #909399;
						}
					}

					.news-content-playicon {
						display: flex;
						justify-content: right;
					}
				}
			}


		}

		.index-sell {
			width: 95%;
			display: flex;
			justify-content: space-between;
			padding: 20rpx;

			.news-text {
				margin-right: 20rpx;
				font-weight: bold;
				font-size: 36rpx;
			}
		}

		.index-foot {
			width: 95%;
			margin-bottom: 150rpx;

			.songlist {
				position: relative;

				.songlist-play {
					position: absolute;
					top: 135rpx;
					right: 35rpx;
				}

				.songlist-title {
					font-size: 30rpx;
				}

			}
		}

		.index-play {
			position: fixed;
			/* #ifndef APP-PLUS */
			bottom: 90rpx;
			/* #endif */

			/* #ifdef APP-PLUS */
			bottom: 0rpx;
			/* #endif */
			width: 414px;
			height: 102rpx;
			border-radius: 40rpx 40rpx 0rpx 0rpx;
			background: rgba(247, 247, 247, 0.9);
			.play-left{
				position: absolute;
				left: 41rpx;
				bottom: 20rpx;
				width: 100rpx;
				height: 100rpx;
				opacity: 1;
				border-radius: 50rpx;
				transform: rotate(45deg);
				background: rgba(21, 21, 21, 1);
				z-index: 666;
				.play-img{
					position: absolute;
					z-index: 667;
					left: 20rpx;
					top: 19rpx;
				}
			}
			.play-center{
					position: absolute;
					left: 160rpx;
					top: 10rpx;
					display: flex;
					flex-direction: column;
				.play-center-title{
					font-size: $uni-font-size-lg;
					color: $uni-text-color;
				}
				.play-center-info{
					font-size: $uni-font-size-sm;
					color: $uni-text-color-grey;
				}
			}
			.play-right{
				position: absolute;
				right:64rpx;
				top: 30rpx;
				display: flex;
				
				.play-right-play{
					margin-right: 20rpx;
				}
			}
			
		}
	}
</style>